10. Пример - Расписание

Создать школьное расписание с разделением по дням недели, где пользователь сможет:

Добавлять уроки по дням недели (с указанием времени, предмета и учителя).
Удалять конкретные уроки из таблицы расписания.
Очищать расписание для конкретного дня или для всех дней сразу.
Сохранять данные расписания в localStorage, чтобы они не терялись при перезагрузке страницы.

Шаги разработки

1. Создание HTML файла

Что нужно сделать:

Создайте файл index.html.
Добавьте базовую структуру документа.
Добавьте элементы формы для добавления урока и кнопки для управления расписанием.

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Школьное расписание по дням</title>
    <link rel="stylesheet" href="styles.css"> <!-- Подключаем стили -->
</head>
<body>

<h1>Школьное расписание</h1>

<!-- Выбор дня недели -->
<select id="day-select">
    <option value="Понедельник">Понедельник</option>
    <option value="Вторник">Вторник</option>
    <option value="Среда">Среда</option>
    <option value="Четверг">Четверг</option>
    <option value="Пятница">Пятница</option>
</select>

<!-- Форма для добавления уроков -->
<form id="schedule-form">
    <input type="text" id="time" placeholder="Время (например, 08:00 - 08:45)" required>
    <input type="text" id="subject" placeholder="Предмет" required>
    <input type="text" id="teacher" placeholder="Учитель" required>
    <button type="submit">Добавить урок</button>
</form>

<button id="clear-all-button">Очистить все расписание</button>

<!-- Таблицы расписания для каждого дня недели -->
<div id="schedules">
    <h2>Понедельник</h2>
    <table class="schedule-table" data-day="Понедельник">
        <thead>
            <tr>
                <th>Время</th>
                <th>Предмет</th>
                <th>Учитель</th>
                <th>Действия</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- Повторяем таблицы для каждого дня недели -->
    <h2>Вторник</h2>
    <table class="schedule-table" data-day="Вторник">
        <thead>
            <tr>
                <th>Время</th>
                <th>Предмет</th>
                <th>Учитель</th>
                <th>Действия</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- Аналогичные таблицы для остальных дней недели -->
</div>

<script src="script.js"></script> <!-- Подключаем файл скриптов -->
</body>
</html>

Объяснение ключевых элементов HTML

<select> — используется для выбора дня недели, к которому будет добавлен урок.
Форма <form> — содержит поля для ввода времени, предмета и учителя.
Кнопка "Очистить все расписание" — очищает все данные из всех таблиц и localStorage.
Таблицы для каждого дня недели — каждая таблица привязана к определённому дню недели через атрибут data-day.

2. Стилизация страницы с помощью CSS

Что нужно сделать:

Создайте файл styles.css.
Вставьте следующий код:

Код:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    text-align: center;
    padding: 20px;
}

h1, h2 {
    margin-bottom: 20px;
}

form {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #009879;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #007960;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}

tr:nth-child(even) {
    background-color: #f3f3f3;
}

3. Логика JavaScript

Что нужно сделать:

Создайте файл script.js.
Вставьте следующий код:

Основной функционал

const form = document.getElementById('schedule-form');
const daySelect = document.getElementById('day-select');
const timeInput = document.getElementById('time');
const subjectInput = document.getElementById('subject');
const teacherInput = document.getElementById('teacher');
const clearAllButton = document.getElementById('clear-all-button');
const schedules = document.querySelectorAll('.schedule-table');

document.addEventListener('DOMContentLoaded', loadData);
form.addEventListener('submit', addLesson);
clearAllButton.addEventListener('click', clearAllSchedules);

function loadData() {
    schedules.forEach(schedule => {
        const day = schedule.getAttribute('data-day');
        const data = JSON.parse(localStorage.getItem(day)) || [];
        data.forEach(lesson => addRowToTable(schedule, lesson.time, lesson.subject, lesson.teacher));
    });
}

function addLesson(event) {
    event.preventDefault();
    const day = daySelect.value;
    const time = timeInput.value;
    const subject = subjectInput.value;
    const teacher = teacherInput.value;

    const scheduleTable = document.querySelector(`table[data-day="${day}"] tbody`);
    addRowToTable(scheduleTable, time, subject, teacher);
    saveData(day, time, subject, teacher);
    form.reset();
}

function addRowToTable(schedule, time, subject, teacher) {
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${time}</td>
        <td>${subject}</td>
        <td>${teacher}</td>
        <td><button class="delete">Удалить</button></td>
    `;
    schedule.appendChild(row);

    row.querySelector('.delete').addEventListener('click', function() {
        row.remove();
        deleteData(schedule.getAttribute('data-day'), time, subject, teacher);
    });
}

function saveData(day, time, subject, teacher) {
    const data = JSON.parse(localStorage.getItem(day)) || [];
    data.push({ time, subject, teacher });
    localStorage.setItem(day, JSON.stringify(data));
}

function deleteData(day, time, subject, teacher) {
    let data = JSON.parse(localStorage.getItem(day)) || [];
    data = data.filter(lesson => lesson.time !== time || lesson.subject !== subject || lesson.teacher !== teacher);
    localStorage.setItem(day, JSON.stringify(data));
}

function clearAllSchedules() {
    schedules.forEach(schedule => schedule.querySelector('tbody').innerHTML = '');
    localStorage.clear();
}

Функциональность

loadData — загружает данные из localStorage для каждого дня.
addLesson — добавляет урок и сохраняет его в localStorage.
addRowToTable — добавляет урок в HTML-таблицу.
saveData — сохраняет урок в localStorage.
deleteData — удаляет урок из localStorage.
clearAllSchedules — очищает все таблицы и localStorage.